<template>
  <div class="page_article">
    <div class="warp">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-9">
            <div class="card">
              <div class="article_detail">
                <h4>文章详情</h4>
                <div_article :obj="obj"></div_article>
              </div>
            </div>
          </div>

          <div class="col-12 col-md-3">
            <div class="card">
              <div class="list_hot">
                <h4>热门文章推荐</h4>
                <list_article_hot :list="list_hot"></list_article_hot>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="warp">
      <div class="container">
        <div class="row">
          <div class="col">
            <bar_title class="mt" title="评论区"></bar_title>
            <div class="comment_box">
              <list_comment class="w-100" :list="list_comment"></list_comment>
              <b-pagination-nav
                :base-url="$route.path"
                :number-of-pages="count_pages"
                :link-gen="link_gen"
                @change="change_page"
                first-number
                last-number
              ></b-pagination-nav>
            </div>
            <div class="form_editor">
              <form_editor
                :form="form_comment"
                @update_comment="update_comment"
              ></form_editor>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "../../mixins/page.js";
import bar_title from "../../components/diy/bar_title.vue";
import div_article from "../../components/diy/div_article.vue";
import list_article_hot from "../../components/diy/list_article_hot.vue";
import list_comment from "../../components/diy/list_comment.vue";
import form_editor from "../../components/diy/form_editor.vue";

export default {
  mixins: [mixin],
  components: {
    list_comment,
    div_article,
    list_article_hot,
    bar_title,
    form_editor,
  },
  data() {
    return {
      url_get_obj: "~/api/article/get_obj?",
      field: "article_id",
      obj: {},
      query: {
        article_id: 0,
      },
      list_hot: [],
      list_comment: [],
      form_comment: {},
      // 页面数
      count_pages: 1,
      // 是否设置过
      seted_count_pages: true,
    };
  },
  methods: {
    get_obj_after(json) {
      var obj = json.result.obj;
      this.get_comment(obj);
      this.form_comment = {
        source_table: "article",
        source_field: "article_id",
        source_id: this.query.article_id,
      };
    },
    get_hot_article() {
      this.$get(
        "~/api/article/get_list",
        {
          page: 1,
          size: 10,
          orderby: "hits",
        },
        (res) => {
          if (res.result) {
            this.list_hot = res.result.list;
          }
        }
      );
    },
    // 获取评论
    get_comment(obj, page = 1, size = 5) {
      console.log(page);
      console.log(size);
      this.$get(
        "~/api/comment/get_list?",
        {
          source_table: "article",
          source_field: "article_id",
          source_id: obj.article_id,
          page,
          size,
          orderby: "create_time desc",
        },
        (json) => {
          if (json.result) {
            var list_comment = json.result.list;
            this.list_comment = list_comment;
            // 分页器
            if (this.seted_count_pages) {
              this.seted_count_pages = false;
              this.count_pages = Math.ceil(json.result.count / size);
            }
          }
        }
      );
    },
    update_comment() {
      this.get_comment(this.obj);
    },

    // 分页器
    link_gen(page_num) {
      return {
        query: this.query,
      };
    },
    change_page(page_num) {
      this.get_comment(this.obj, page_num);
    },
  },
  mounted() {
    this.get_hot_article();
  },
};
</script>

<style scoped>
.card {
  word-wrap: break-word;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.article_detail h4 {
  font-size: 20px;
}
.list_hot h4 {
  font-size: 20px;
}
.form_editor {
  padding: 10px;
}

.comment_box{
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
